<!-- 有奖竞猜  -->
<template>
	<s-layout title="冠军猜想" :bgStyle="{ color: '#f2f2f2' }">
		<s-empty v-if="state.total === 0" icon="/static/coupon-empty.png" text="暂无数据"></s-empty>
		<view class="team-list" >
			<view class="list-box" v-for="(item, index) in state.gameData" :key="index"  @click="btJump(item.id,item.team_count,item.event_id)">
				<view class="img-box">
					<image class="img-img" :src="`${url}${item.image}`" mode="widthFix"></image>
				</view>
				<view class="content-box">
					<view class="content-box-text" >
						{{ item.name }}   
					</view>
					
					<view class="content-box-time">
						{{ `${getStrTime(item.start_time)} - ${getStrTime(item.end_time)}` }}
					</view>
				</view>
			</view>
		</view>
		<uni-load-more v-if="state.total > 0" :status="state.loadStatus" :content-text="{
			contentdown: '上拉加载更多',
		}" tap="loadmore" />
	</s-layout>
</template>

<script setup>
import { baseUrl } from '@/sheep/config';
import sheep from '@/sheep';
import {
	onLoad,
	onShow,
	onReachBottom
} from '@dcloudio/uni-app';
import {
	computed,
	reactive
} from 'vue';
import _ from 'lodash';
// import { onShow } from '@/unpackage/dist/dev/mp-weixin/common/vendor';
const url = baseUrl.slice(0,baseUrl.lastIndexOf("index.php"));
const state = reactive({
	loadStatus: '',
	total: 3,
	gameData: []
});

function btJump(id,team_count,event_id) {
	uni.navigateTo({
		url: `/pages/coupon/teamlist?id=${id}&team_count=${team_count}&event_id=${event_id}`
	})
}

function getStrTime(str){
	let lastSpaceIndex = str.lastIndexOf(' ');
    return lastSpaceIndex === -1 ? str : str.substring(0, lastSpaceIndex);
}

async function getData() {
	let {code,data} = await sheep.$api.game.eventsguess();
	if (code) {
		state.gameData = data;
	}
}
onShow(()=>{
	getData()
})

// 加载更多
function loadmore() {
	if (state.loadStatus !== 'noMore') {
		if (state.currentTab == 0) {
			getData(state.pagination.current_page + 1);
		} else {
			getCoupon(state.pagination.current_page + 1);
		}
	}
}

onReachBottom(() => {
	loadmore();
});
</script>
<style lang="scss" scoped>
.btn-zhuti-box {
	display: flex;
}

.btn-zhuti-box>button {
	margin-right: 10rpx;
}

.btn-zhuti-box>button:last-child {
	margin-right: 0;
}

.content-box {
	padding: 15rpx;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-left: 25rpx;
}

.team-list {
	padding: 25rpx 15rpx;
}

.list-box {
	display: flex;
	margin-bottom: 26rpx;
	background-color: #fff;
	padding: 10rpx;
	border-radius: 10rpx;
	flex-shrink: 0;
	
}

.img-box {
	flex-shrink: 0;
	width: 130rpx;
	height: 130rpx;
	margin-top: 10rpx;
}

.img-img {
	width: 100%;
	border-radius: 10rpx;
}

.content-box-text {
	margin-bottom: 30rpx;
}

.content-box-time {
	color: #c1c1c1;
	font-size: 24rpx;
	padding-bottom: 15rpx;
	/*border-bottom: 1rpx dashed #c1c1c1;*/
}

::v-deep.uni-collapse-item__title.uni-collapse-item-border {
	border-bottom: none;
}

::v-deep.uni-collapse-item__wrap-content.uni-collapse-item--border {
	border-bottom: none;
}

::v-deep.uni-collapse-item__title-box {
	height: auto;
	line-height: 230%;
}

.collapse-box2 {
	line-height: 180%;
}
</style>